<template>
	<view class="table-container">
		<view class="table-header">
			<text class="table-cell">ID</text>
			<text class="table-cell">收入</text>
			<text class="table-cell">支出</text>
			<text class="table-cell">合计收支</text>

		</view>
		<view class="table-row" v-for="(item, index) in tableData" :key="index">
			<text class="table-cell">{{ item.id }}</text>
			<text class="table-cell">{{ item.add }}</text>
			<text class="table-cell">{{ item.reduce }}</text>
			<text class="table-cell">{{ item.balance}}</text>
		</view>
		<view >
			<text class="table-cell">{{item.sum}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sum: '',
				tableData: []
			};
		},
		methods: {
			getJwtToken() {
				try {
					return wx.getStorageSync('jwt_token');
				} catch (e) {
					// 处理获取令牌失败的逻辑，比如返回 null 或抛出错误  
					return null;
				}
			},
			sendRequestWithToken(url, method) {
				const token = this.getJwtToken();
				if (token) {
					wx.request({
						url: url,
						method: method,
						header: {
							'token': token
						},
						success: (res) => {
							if (res.data.code === 1 && res.data.msg === 'success') {
								this.sum = res.data.data.sum;
								this.tableData = res.data.data.classFeeList;
							} else if (res.data.code === 0) {
								uni.showToast({
									title: '登录信息有误',
									icon: null
								});
								this.goPage(7);
								console.error('未登录', res.data.data);
							}
						},
						fail: (error) => {
							uni.showToast({
								title: '网络请求失败',
								icon: 'none'
							});
							console.error('请求失败', error);
						}
					});
				} else {
					this.goPage(7);
					// 如果没有令牌，处理没有令牌的情况，比如跳转到登录页  
					console.error('No token found, please login first.');
				}
			},
			getuserName() {
				try {
					return wx.getStorageSync('user_name');
				} catch (e) {
					// 处理获取令牌失败的逻辑，比如返回 null 或抛出错误  
					return null;
				}
			},
			// 在某个页面的事件处理函数中  
			showStudent() {
				const username = this.getuserName();
				if (username) {
					const url = `http://localhost:8080/patra/money/${username}`;
					const method = 'GET';
					this.sendRequestWithToken(url, method)
				} else {
					console.error('用户名未找到');
				}
			},
			onLoad() {
				this.showStudent();
			}
		}
	};
</script>

<style>
	.table-container {
		display: flex;
		flex-direction: column;
		width: 100%;
		/* 或者其他你需要的宽度 */
	}

	.table-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #ccc;
		/* 添加底部表格线 */
	}

	.table-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #ccc;
		/* 添加底部表格线 */
	}

	.table-cell {
		padding: 10px;
		/* 添加内边距以美化单元格 */
		border-right: 1px solid #ccc;
		/* 添加右边表格线，除了最后一个单元格 */
	}

	.table-cell:last-child {
		border-right: none;
		/* 移除最后一个单元格的右边表格线 */
	}
</style>